<template>
  <div class="app-main-content-box">
    <!-- 标题 -->
    <app-main-title title="创建活动" />

    <!-- 筛选条件 -->
    <el-form ref="form" :model="form" label-suffix="：" label-width="80px" size="small">
      <el-form-item label="场景">
        <el-radio-group v-model="form.scene">
          <el-radio-button label="全部" />
          <el-radio-button label="到店前" />
          <el-radio-button label="到店后" />
          <el-radio-button label="支付前" />
          <el-radio-button label="支付后" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="标签">
        <el-radio-group v-model="form.tag">
          <el-radio-button label="全部" />
          <el-radio-button label="拉复购" />
          <el-radio-button label="提客单" />
          <el-radio-button label="拉储值" />
          <el-radio-button label="带销量" />
          <el-radio-button label="拉会员" />
          <el-radio-button label="唤沉睡" />
        </el-radio-group>
      </el-form-item>
    </el-form>

    <!-- 卡片 -->
    <el-row :gutter="30" type="flex" style="flex-wrap: wrap;">
      <el-col
        v-for="item in list "
        v-show="item.tag.includes(form.scene)&&item.tag.includes(form.tag)"
        :key="item.title"
        :xs="12"
        :sm="12"
        :md="12"
        :lg="8"
        :xl="6"
      >
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div class="card-content" @click="jumpPage({activityType:item.type,onlyMemberDay:item.onlyMemberDay})">
            <div class="info-box">
              <div class="icon">
                <img :src="require('@/assets/icon/'+item.icon+'.png')" alt>
              </div>
              <div class="content">
                <div class="title app-line-one">{{ item.title }}</div>
                <div class="tips app-line-3">{{ item.describe }}</div>
              </div>
            </div>
            <div class="tags-box">
              <el-tag v-for="tag in item.tag" :key="tag" size="medium">{{ tag }}</el-tag>
            </div>
          </div>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 配置
      typeOptions: ['全部', '到店前', '到店后', '支付前', '支付后'],
      tagsOptions: [
        '全部',
        '拉复购',
        '提客单',
        '拉储值',
        '带销量',
        '拉会员',
        '唤沉睡'
      ],
      // 数据
      list: [
        {
          title: '消费满额赠礼',
          describe: '用户消费满一定金额即获赠一张卡/券包，拉动用户二次复购或从线下门店引导至线上核销',
          tag: ['全部', '支付后', '拉复购'],
          type: 1,
          onlyMemberDay: false,
          icon: 'i-present_1'
        },
        {
          title: '会员日消费满额赠礼',
          describe: '会员在会员日消费满一定金额即获赠一张卡/券包，拉动会员二次复购或从线下门店引导至线上核销',
          tag: ['全部', '支付后', '拉复购'],
          type: 1,
          onlyMemberDay: true,
          icon: 'i-present_2'
        },
        {
          title: '支付后返现到微信红包',
          describe: '用户支付满一定的金额即可获得红包返现，红包发送到用户微信，点击即可领取，可以提高客单价和销量',
          tag: ['全部', '支付后', '提客单', '带销量'],
          type: 3,
          onlyMemberDay: false,
          icon: 'i-present_2'
        },
        {
          title: '领券活动',
          describe: '用户通过二维码或者活动链接进入活动页面领取优惠券，可设置限制领取人等领取条件',
          tag: ['全部', '到店前', '拉复购'],
          type: 4,
          onlyMemberDay: false,
          icon: 'i-activity-coupon-bag'
        },
        {
          title: '单品立减',
          describe: '用户购买指定数量的活动商品时可享受该单品的立减优惠',
          tag: ['全部', '支付前', '提客单', '带销量'],
          type: 5,
          onlyMemberDay: false,
          icon: 'i-present_2'
        },
        {
          title: '单品买N送M',
          describe: '用户购买指定单品时可享受N+M件单品中的M件免单, 比如买一送一, 买二送一',
          tag: ['全部', '支付前', '提客单', '带销量'],
          type: 6,
          onlyMemberDay: false,
          icon: 'i-present_2'
        },
        {
          title: '单品折扣',
          describe: '用户购买指定单品时可享受该单品的折扣优惠, 比如买满两件7折',
          tag: ['全部', '支付前', '提客单', '带销量'],
          type: 7,
          onlyMemberDay: false,
          icon: 'i-present_2'
        },
        {
          title: '单品减至固定优惠价',
          describe: '用户购买指定单品时, 该单品立刻减到固定的价格成交。比如一口价',
          tag: ['全部', '支付前', '提客单', '带销量'],
          type: 8,
          onlyMemberDay: false,
          icon: 'i-present_2'
        }
      ],
      form: {
        scene: '全部',
        tag: '全部'
      }
    }
  },
  methods: {
    /**
     * 按钮组
     */
    // 跳转
    jumpPage(query) {
      this.$router.push({
        name: 'MarketingActivityForm',
        query: query
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-card {
  height: 100%;
}

.el-col {
  margin-bottom: 20px;
}

.card-content {
  padding: 25px 20px;
  cursor: pointer;
}

/* 盒子 */
.info-box {
  display: flex;
  align-items: center;

  .icon {
    width: 70px;
    height: 70px;
    margin-right: 20px;
    flex: 0 0 auto;
  }

  .content {
    flex: 1 1 auto;

    .title {
      margin-bottom: 8px;
      font-size: 20px;
      font-weight: bold;
    }

    .tips {
      font-size: 14px;
    }
  }
}

/* 标签 */
.tags-box {
  margin-top: 10px;

  .el-tag {
    margin-top: 10px;
    margin-right: 10px;
  }
}
</style>
